<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="名称：" prop="serverName">
          <el-input v-model="search.serverName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="消息类型：" prop="messageType">
          <el-select v-model="search.messageType" placeholder="请选择">
            <el-option
              v-for="item in controlData.messageTypes"
              :key="item.typeId"
              :label="item.name"
              :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      keyProp="serverId"
      menuType="text"
      :formOptions="{ labelWidth: '120px' }"
      :menuOptions="{ width: 100 }"
      :rules="rules"
      :showView="false"
    >
      <qm-table-column field="serverName" sortable="true">服务器名称</qm-table-column>
      <qm-table-column field="messageType" sortable="true" :renderFunc="renderMessageType">消息类型</qm-table-column>
      <qm-table-column field="isEnabled" sortable="true" fieldType="enabledisable" width="100">是否启用</qm-table-column>

      <template v-slot:form="{ model, controlData, models }">
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务器名称：" prop="model.serverName">
              <el-input v-model="model.serverName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理器：" prop="model.handler">
              <el-input v-model="model.handler"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="消息类型：" prop="model.messageType">
              <el-select v-model="model.messageType">
                <el-option
                  v-for="item in controlData.messageTypes"
                  :key="item.typeId"
                  :label="item.name"
                  :value="item.typeId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用：" prop="model.isEnabled">
              <el-radio v-model="model.isEnabled" :label="true">是</el-radio>
              <el-radio v-model="model.isEnabled" :label="false">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="重试次数：" prop="model.retryCount">
              <el-input v-model="model.retryCount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展字段1：" prop="model.reserve1">
              <el-input v-model="model.reserve1"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扩展字段2：" prop="model.reserve2">
              <el-input v-model="model.reserve2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="扩展字段3：" prop="model.reserve3">
              <el-input v-model="model.reserve3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>服务器参数设置</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addParameter">新增</el-button>
          </div>

          <qm-table
            :data="{ data: models.parameters }"
            :showCheckbox="false"
            :showToolbar="false"
            :menuOptions="{ width: 80 }"
          >
            <qm-table-column field="name">
              参数名称
              <template #content="{ row }">
                <el-input v-model="row.name"></el-input>
              </template>
            </qm-table-column>
            <qm-table-column field="value">
              参数值
              <template #content="{ row }">
                <el-input v-model="row.value"></el-input>
              </template>
            </qm-table-column>
            <qm-table-column field="reserve1">
              扩展1
              <template #content="{ row }">
                <el-input v-model="row.reserve1"></el-input>
              </template>
            </qm-table-column>
            <qm-table-column field="reserve2">
              扩展2
              <template #content="{ row }">
                <el-input v-model="row.reserve2"></el-input>
              </template>
            </qm-table-column>
            <qm-table-column field="reserve3">
              扩展3
              <template #content="{ row }">
                <el-input v-model="row.reserve3"></el-input>
              </template>
            </qm-table-column>
            <qm-table-column field="memo">
              备注
              <template #content="{ row }">
                <el-input v-model="row.memo"></el-input>
              </template>
            </qm-table-column>

            <template v-slot:moreBtn="{ row }">
              <el-button type="text" @click="removeParameter(row)">删除</el-button>
            </template>
          </qm-table>
        </el-card>
      </template>
    </qm-table>
  </div>
</template>
<script>
import Controller from "@/libs/framework/controller";
import _ from "lodash";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: "/message/sysMessageServer/query",
      save: "/message/sysMessageServer/save",
      delete: "/message/sysMessageServer/delete",
      entity: "/message/sysMessageServer/getEntity",
      model:"/message/sysMessageServer/getListModel"
    };
  }

  mixin() {
    return {
      data() {
        return {
          rules: {
            model: {
              serverName: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              handler: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
              messageType: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "change",
                },
              ],
              retryCount: [
                {
                  required: true,
                  message: "这是必填字段",
                  trigger: "blur",
                },
              ],
            },
          },
        };
      },
      methods: {
        renderMessageType(val, row, column) {
          let find = this.super.$util.find(
            this.controlData.messageTypes,
            (item) => {
              return item.typeId === val;
            }
          );
          
          return (find || {}).name;
        },
        addParameter() {
          let vm = this.$refs["qmTable"].viewModel;
          vm.models.parameters.push(_.extend({}, vm.controlData.parameter));
        },
        removeParameter(d) {
          let vm = this.$refs["qmTable"].viewModel;
          vm.models.parameters.remove(d);
        },
      },
     
    };
  }
}
</script>

<style scoped lang="scss">
</style>

